<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>产品信息管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/lib/layui-v2.6.3/layui.js"></script>

    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --danger: #f72585;
            --warning: #f8961e;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
        }

        body {
            background: #f8fafc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #334155;
        }

        .card {
            background: white;
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            cursor: pointer;
            border: none;
            outline: none;
        }

        .btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
        }

        .btn-blue {
            background: var(--primary);
            color: white;
        }

        .btn-blue:hover {
            background: var(--secondary);
            transform: translateY(-1px);
        }

        .btn-gray {
            background: #f1f5f9;
            color: #64748b;
        }

        .btn-gray:hover {
            background: #e2e8f0;
            transform: translateY(-1px);
        }

        .btn-green {
            background: #10b981;
            color: white;
        }

        .btn-green:hover {
            background: #059669;
            transform: translateY(-1px);
        }

        .form-input {
            padding: 0.6rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid #d1d5db;
            transition: all 0.2s;
            width: 100%;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
        }

        /* 修改按钮样式 - 确保垂直居中 */
        .action-btn {
            display: inline-flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            padding: 0.4rem 0.8rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid transparent;
            height: 32px; /* 固定高度确保一致性 */
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .action-btn-add {
            background: var(--primary);
            color: white;
        }

        .action-btn-add:hover {
            background: var(--secondary);
            color: white;
        }

        .action-btn-edit {
            background: var(--primary-light);
            color: white;
            margin-right: 0.5rem;
        }

        .action-btn-edit:hover {
            background: var(--primary);
            color: white;
        }

        .action-btn-delete {
            background: #fef2f2;
            color: #ef4444;
            border: 1px solid #fecaca;
        }

        .action-btn-delete:hover {
            background: #ef4444;
            color: white;
        }

        .action-btn-normal {
            background: #eff6ff;
            color: var(--primary);
            border: 1px solid #bfdbfe;
        }

        .action-btn-normal:hover {
            background: #dbeafe;
            color: var(--secondary);
        }

        .page-title {
            color: #1e293b;
            font-weight: 600;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .section-title {
            color: #334155;
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        /* 表格样式优化 */
        .layui-table {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
        }

        .layui-table thead tr {
            background: linear-gradient(to right, #f8fafc, #f1f5f9) !important;
        }

        .layui-table th {
            font-weight: 600;
            color: #334155;
        }

        .layui-table td, .layui-table th {
            padding: 0.75rem 1rem;
        }

        .layui-table tr:hover td {
            background-color: #f8fafc !important;
        }

        /* 操作列样式优化 - 确保按钮居中 */
        .table-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            align-items: center; /* 垂直居中 */
            padding: 0.5rem 0;
            height: 100%; /* 确保高度填满 */
        }

        /* 分页样式优化 */
        .layui-laypage a, .layui-laypage span {
            border-radius: 0.375rem !important;
            border: 1px solid #e2e8f0 !important;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: var(--primary) !important;
            border-radius: 0.375rem !important;
        }

        /* 复选框样式优化 */
        .layui-table-header .layui-form-checkbox[lay-skin="primary"] {
            margin-top: 0;
        }

        /* 搜索表单样式 */
        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            align-items: end;
        }

        @media (min-width: 768px) {
            .search-form {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* 工具栏按钮样式 */
        .toolbar-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        /* 加载动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card {
            animation: fadeIn 0.5s ease-out;
        }

        /* 新增样式确保图标和文字垂直居中 */
        .action-btn svg {
            margin-right: 4px;
            flex-shrink: 0; /* 防止图标被压缩 */
        }
    </style>
</head>
<body class="p-6 bg-gray-50">

<div class="max-w-7xl mx-auto">
    <!-- 页面标题 -->
    <h1 class="page-title">产品信息管理</h1>

    <!-- 搜索栏 -->
    <div class="card">
        <h2 class="section-title">搜索筛选</h2>
        <form class="layui-form search-form" id="searchForm">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">产品名称</label>
                <input type="text" name="itemName" placeholder="请输入产品名称"
                       class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">产品编号</label>
                <input type="text" name="itemNo" placeholder="请输入产品编号"
                       class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">客人货号</label>
                <input type="text" name="customerItemsNo" placeholder="请输入客人货号"
                       class="form-input">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">工厂货号</label>
                <input type="text" name="supplierItemsNo" placeholder="请输入工厂货号"
                       class="form-input">
            </div>
            <div class="flex space-x-2 items-end">
                <button type="submit" class="btn btn-blue flex items-center" lay-submit lay-filter="data-search-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    搜索
                </button>
                <button type="reset" class="btn btn-gray flex items-center" lay-submit lay-filter="data-refresh-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    刷新
                </button>
                <button type="button" class="btn btn-green flex items-center" id="importItem">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                    </svg>
                    导入产品
                </button>
            </div>
        </form>
    </div>

    <!-- 表格区域 -->
    <div class="card">
        <div class="flex justify-between items-center mb-4">
            <h2 class="section-title">产品信息列表</h2>
            <div class="toolbar-container">
                <button class="action-btn action-btn-add flex items-center" id="addBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    添加
                </button>
                <button class="action-btn action-btn-normal flex items-center" id="viewBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    查看
                </button>
                <button class="action-btn action-btn-normal flex items-center" id="uploadFileBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    上传图片
                </button>
                <button class="action-btn action-btn-normal flex items-center" id="createQuotationBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    生成报价单
                </button>
                <button class="action-btn action-btn-normal flex items-center" id="createSampleBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                    生成样品单
                </button>
                <button class="action-btn action-btn-normal flex items-center" id="exportBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    导出
                </button>
                <button class="action-btn action-btn-normal flex items-center" id="importTemplateBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    下载模板
                </button>
                <button class="action-btn action-btn-delete flex items-center" id="deleteBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    删除
                </button>
            </div>
        </div>

        <!-- Layui 表格 -->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>

<!-- 操作栏模板 - 已修改确保文字居中 -->
<script type="text/html" id="currentTableBar">
    <div class="table-actions">
        <button class="action-btn action-btn-edit" lay-event="edit">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
            </svg>
            编辑
        </button>
    </div>
</script>

<script src="/static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="/static/js/common.js"></script>
<script>
    let user = $.common.getUserInfo();
    let isUser = $.common.checkUserAdmin();

    layui.use(['form', 'table', 'upload', 'laydate'], function () {
        var lay, form, table, upload, laydate;
        lay = layui.jquery;
        form = layui.form;
        table = layui.table;
        upload = layui.upload;
        laydate = layui.laydate;

        // 渲染表格
        table.render({
            elem: '#currentTableId',
            url: '/item/pages',
            method: "post",
            request: {
                pageName: "pageNum",
                limitName: "pageSize"
            },
            contentType: "application/json; charset=utf-8",
            where: { param: {} },
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 65, title: 'ID', sort: true},
                {field: 'itemName', width: 150, title: '产品名称'},
                {field: 'itemNo', width: 100, title: '产品编号'},
                {field: 'itemUnit', width: 100, title: '产品单位'},
                {field: 'itemWeight', width: 100, title: '产品重量'},
                {field: 'itemQuality', width: 100, title: '材质分析'},
                {field: 'customerItemsNo', width: 100, title: '客人货号'},
                {field: 'supplierItemsNo', width: 100, title: '工厂货号'},
                {
                    field: 'isTax', width: 100, title: '是否含税', templet: function (a) {
                        if (a.isTax == "yes") {
                            return "是";
                        }
                        if (a.isTax == "no") {
                            return "否";
                        }
                        return a.isTax;
                    }
                },
                {field: 'supplierPrice', width: 100, title: '工厂价格'},
                {
                    field: 'itemSizeLength', width: 160, title: '产品尺寸-长', templet: function (a) {
                        if (a.itemSizeLength) {
                            return $.utils.lengthConversion(a.itemSizeLength);
                        }
                        return '';
                    }
                },
                {
                    field: 'itemSizeWidth', width: 160, title: '产品尺寸-宽', templet: function (a) {
                        if (a.itemSizeWidth) {
                            return $.utils.lengthConversion(a.itemSizeWidth);
                        }
                        return '';
                    }
                },
                {
                    field: 'itemSizeHeight', width: 160, title: '产品尺寸-高', templet: function (a) {
                        if (a.itemSizeHeight) {
                            return $.utils.lengthConversion(a.itemSizeHeight);
                        }
                        return '';
                    }
                },
                {field: 'innerBoxSizeLength', width: 120, title: '内箱-长cm'},
                {field: 'innerBoxSizeWidth', width: 120, title: '内箱-宽cm'},
                {field: 'innerBoxSizeHeight', width: 120, title: '内箱-高cm'},
                {field: 'boxSizeLength', width: 120, title: '外箱-长cm'},
                {field: 'boxSizeWidth', width: 120, title: '外箱-宽'},
                {field: 'boxSizeHeight', width: 120, title: '外箱-高'},
                {field: 'boxSroughWeight', width: 100, title: '外箱-毛重'},
                {field: 'boxSuttle', width: 100, title: '外箱-净重'},
                {field: 'cubeNumber', width: 100, title: '立方数'},
                {field: 'justCount', width: 100, title: '才数'},
                {field: 'innerBoxNumber', width: 80, title: '內盒数量'},
                {field: 'boxNumber', width: 120, title: '外箱数量'},
                {field: 'supplierId', width: 80, title: '工厂ID'},
                {field: 'supplierNo', width: 120, title: '工厂编号'},
                {field: 'supplierName', width: 120, title: '工厂名称'},
                {
                    field: 'createTime',
                    width: 120,
                    title: '创建时间',
                    templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                },
                {field: 'updateUser', width: 100, title: '修改人'},
                {
                    field: 'updateTime',
                    width: 120,
                    title: '修改时间',
                    templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>"
                },
                {title: '操作', minWidth: 130, toolbar: '#currentTableBar', align: "center", fixed: 'right'}
            ]],
            done: function (res, curr, count) {  //隐藏列
                if ($.common.userIsAdmin()) {
                    $("[data-field='updateUser']").css('display', 'none');
                    $("[data-field='updateTime']").css('display', 'none');
                }
                if(!$.common.userIsShowPower()){
                    $("[data-field='supplierPrice']").css('display', 'none');
                }
            },
            limits: [5, 10, 20, 50],
            limit: 10,
            page: true,
            skin: 'line',
            even: true,
            text: {
                none: '暂无相关数据'
            }
        });

        // 搜索
        form.on('submit(data-search-btn)', function (data) {
            table.reload('currentTableId', {
                page: { curr: 1 },
                where: { param: data.field }
            });
            return false;
        });

        // 刷新
        form.on('submit(data-refresh-btn)', function () {
            table.reload('currentTableId', {
                where: { param: {} }
            });
            return false;
        });

        // 添加按钮
        $("#addBtn").on("click", function () {
            layer.open({
                title: '添加产品',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['90%', '90%'],
                content: '/static/page/item/add.html',
            });
        });

        // 查看按钮
        $("#viewBtn").on("click", function () {
            let checkStatus = table.checkStatus('currentTableId');
            if (checkStatus.data.length != 1) {
                layer.msg("请选择一条数据", {icon: 2});
                return false;
            }
            let data = checkStatus.data[0];
            var index = layer.open({
                title: '查看产品',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['90%', '90%'],
                content: '/static/page/item/view.html',
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    for (let key in data) {
                        body.find("#" + key).val(data[key]);
                        //图片处理
                        if ('photo' == key && data[key]) {
                            let array = data[key].split(";");
                            for (let data in array) {
                                let ph = array[data]
                                if (ph) {
                                    body.find('#uploadImg').append('<img src="' + ph + '" class="layui-upload-img" width="50%" height="50%">');
                                }
                            }
                        }
                    }
                    body.find("input").attr("disabled", true);
                }
            });
        });

        // 上传图片按钮
        $("#uploadFileBtn").on("click", function () {
            var index = layer.open({
                title: '上传产品图片',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['90%', '90%'],
                content: '/static/page/item/uploadFile.html',
            });
        });

        // 生成报价单按钮
        $("#createQuotationBtn").on("click", function () {
            let selectData = table.checkStatus('currentTableId');
            if (selectData.data.length < 1) {
                layer.msg("请至少选择一条数据", {icon: 2});
                return false;
            }
            let ids = $.utils.getIds(selectData.data);
            ids=encodeURIComponent(JSON.stringify(ids));
            var index = layer.open({
                title: '生成报价单',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['90%', '90%'],
                content: '/static/page/item/createQuotation.html?ids='+ids,
            });
        });

        // 生成样品单按钮
        $("#createSampleBtn").on("click", function () {
            let selectData = table.checkStatus('currentTableId');
            if (selectData.data.length < 1) {
                layer.msg("请至少选择一条数据", {icon: 2});
                return false;
            }
            let ids = $.utils.getIds(selectData.data);
            ids=encodeURIComponent(JSON.stringify(ids));
            var index = layer.open({
                title: '生成样品单',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['90%', '90%'],
                content: '/static/page/item/createSample.html?ids='+ids,
            });
        });

        // 导出按钮
        $("#exportBtn").on("click", function () {
            var d = {};
            //转换成JSON数据
            var t = $("#searchForm").serializeArray();
            $.each(t, function () {
                d[this.name] = this.value;
            });
            let selectData = table.checkStatus('currentTableId');
            if (selectData.data.length > 0) {
                d['idBatch'] = $.utils.getIds(selectData.data);
            }
            url = '/item/export/' + encodeURIComponent(JSON.stringify(d));
            window.location.href = url;
        });

        // 下载模板按钮
        $("#importTemplateBtn").on("click", function () {
            window.location.href = '/static/template/item_import.xlsx';
        });

        // 删除按钮
        $("#deleteBtn").on("click", function () {
            let selectData = table.checkStatus('currentTableId');
            if (selectData.data.length < 1) {
                layer.msg("请至少选择一条数据", {icon: 2});
                return false;
            }
            let ids = $.utils.getIds(selectData.data);
            layer.confirm('确定要删除选中的数据吗？', {
                title: '删除确认',
                icon: 3,
                btn: ['确定', '取消']
            }, function (index) {
                layer.close(index);
                let url = "/item/deleteByIds";
                let callback = {
                    onSuccess: function (result) {
                        if (result.code == 0) {
                            layer.msg("删除成功", {icon: 1});
                            table.reload('currentTableId');
                        } else {
                            layer.msg("删除失败：" + result.message, {icon: 2});
                        }
                    }
                };
                $.xAjax(url, 'POST', JSON.stringify(ids), callback);
            });
        });

        // 导入产品
        var uploadInst = upload.render({
            elem: '#importItem' //绑定元素
            , url: '/item/importItem' //上传接口
            , accept: 'file'
            , exts: 'xls|xlsx'//限制上传文件的后缀名，用|分隔
            , done: function (res) {
                if (res.code == 0) {
                    layer.msg(res.message, {icon: 1});
                    table.reload('currentTableId');
                } else {
                    layer.msg(res.message, {icon: 2});
                    return false;
                }
            }
            , error: function () {
                //请求异常回调
                layer.msg("请求异常", {icon: 2});
                return false;
            }
        });

        // 监听工具条
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    title: '修改产品',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/static/page/item/add.html?supplierId=' + data.supplierId + "&isTax=" + data.isTax,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        for (let key in data) {
                            body.find("#" + key).val(data[key]);
                            //图片处理
                            if ('photo' == key && data[key]) {
                                let array = data[key].split(";");
                                for (let data in array) {
                                    let ph = array[data]
                                    if (ph) {
                                        body.find('#uploadImg').append('<img src="' + ph + '" class="layui-upload-img" width="50%" height="50%">');
                                    }
                                }
                            }
                        }
                    }
                });
            }
        });
    });
</script>

</body>
</html>